<template>
    <view class="page">
        <view class="tabs_box">
            <view :class="status == 1 ? 'underway1_box' : 'underway_box'" @click="marchBtn(1)">
                进行中
            </view>
            <view :class="status == 2 ? 'effectiveness1_box' : 'effectiveness_box'" @click="marchBtn(2)">
                已失效
            </view>
        </view>
        <scroll-view scroll-y @scrolltolower="lower()" class="main_box">
            <view class="dange_box" v-for="item,index in benefitList" :key="index">
                <view class="num_box">
                    {{ item.total_amount || '' }}
                </view>
                <view class="headers_box">
                    <avatarGroup :urls="imgList" :size="41" :max-count="4" />
                </view>
                <view class="text_box">
                    <view class="time_box">时间：{{item.create_time | formatDate('-')}}</view>
                    <view class=" numberint_box" v-if="status == 2">10人已完</view>
                    <view class="received_box" v-if="status == 1"><text style="color: #F8B857;padding-right: 12rpx;">8
                        </text> 人已领取</view>
                    <view class=" numberint_box" v-if="status == 1"><text style="color: #F8B857;padding-right: 12rpx;">{{ item.num }}
                        </text> 个剩余</view>

                </view>
            </view>
        </scroll-view>
    </view>
</template>
<script>
import avatarGroup from '../components/avatar-group/components/avatar-group/avatar-group.vue'
export default {
    components: {
        avatarGroup
    },
    data() {
        return {
            status: 1,//1：进行中 2：已失效
            benefitList: [],//福利列表
            page: 1,
            flag: true,
            imgList: [
                'https://cdn.uviewui.com/uview/album/1.jpg',
                'https://cdn.uviewui.com/uview/album/2.jpg',
                'https://cdn.uviewui.com/uview/album/3.jpg',
                'https://cdn.uviewui.com/uview/album/4.jpg',
                'https://cdn.uviewui.com/uview/album/7.jpg',
                'https://cdn.uviewui.com/uview/album/6.jpg',
                'https://cdn.uviewui.com/uview/album/5.jpg'
            ]
        }
    },
    onShow() {
        this.Getbenefit()
    },
    filters: {
		// 时间戳处理
		formatDate: function (value, spe = '/') {
			value = value * 1000
			let data = new Date(value);
			let year = data.getFullYear();
			let month = data.getMonth() + 1;
			let day = data.getDate();
			let h = data.getHours();
			let mm = data.getMinutes();
			let s = data.getSeconds();
			month = month >= 10 ? month : "0" + month;
			day = day >= 10 ? day : "0" + day;
			h = h >= 10 ? h : "0" + h;
			mm = mm >= 10 ? mm : "0" + mm;
			s = s >= 10 ? s : "0" + s;
			return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
		}
	},
    methods: {
        //选项卡
        marchBtn(id) {
            this.page = 1
            this.benefitList = []
            this.status = id
            this.Getbenefit()
        },
        lower() {
            uni.showToast({
                title: "已经到底了",
                icon: 'none'
            })
        },
        //福利列表
        Getbenefit() {
            let data = {
                page: this.page,
                status: this.status
            }
            uni.showLoading({
                title: "加载中..."
            })
            this.$Request.get(this.$api.user.packetPacketLog, data).then(res => {

                uni.hideLoading()
                var benefitList = res.data.list;
                this.page++;
                this.benefitList = this.benefitList.concat(benefitList);// 拼接回来的数据
                // 当回来的数据小于十条得时候 不让再请求了 否则继续请求
                if (benefitList.length < 10) {
                    this.flag = false
                } else {
                    this.flag = true
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: #262626;
    padding-top: 40rpx;

    .tabs_box {
        width: 693rpx;
        height: 79rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        border: 1rpx solid #D8D6AF;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25rpx;

        .underway_box,
        .effectiveness_box {
            width: 358rpx;
            height: 79rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            color: #D8D6AF;
            text-align: center;
            line-height: 79rpx;
        }

        .underway1_box,
        .effectiveness1_box {
            width: 358rpx;
            height: 79rpx;
            background: linear-gradient(180deg, #FFE2B7 0%, #F5B143 100%);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            color: #515151;
            text-align: center;
            line-height: 79rpx;
        }
    }

    .main_box {
        width: 100%;
        height: calc(100vh - 150rpx);

        .dange_box {
            width: 693rpx;
            height: 161rpx;
            background: #393834;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            border: 1rpx solid #D8D6AF;
            margin: auto;
            margin-bottom: 21rpx;
            padding: 15rpx 27rpx 0 27rpx;
            position: relative;

            .num_box {
                width: 300rpx;
                height: 79rpx;
                font-size: 60rpx;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #F8B857;
                margin-bottom: 5rpx;
                line-height: 79rpx;
            }

            .headers_box {
                width: 350rpx;
                height: 51rpx;
                position: absolute;
                top: 19rpx;
                right: 27rpx;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }

            .text_box {
                width: 100%;
                height: 37rpx;
                line-height: 37rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .time_box {
                    font-size: 24rpx;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #A4A4A4;
                }

                .received_box,
                .numberint_box {
                    font-size: 28rpx;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #FCFCFC;
                }
            }
        }
    }
}
</style>